<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:23:"themes/admin/login.html";i:1568608663;}*/ ?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>登录-后台管理</title>
    <link rel="stylesheet" href="/themes/admin/assets/css/layui.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
      body{
        background:url('/uploads/articleImg/20190614/4d5f7e0e05bac48030b8b82ab64a132e.jpg') no-repeat;
        background-size:cover;
      }
      *{
        padding: 0;
        margin: 0;
      }
      #box{
        position: relative;
        width: 300px;
        height: 40px;
        margin: 0 auto;
        margin-top: 10px; 
        background-color: #e8e8e8;
        box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
      }
      .bgColor{
        position: absolute;
        left:0;
        top:0;
        width:40px;
        height: 40px;
        background-color: #93c47d;
      }
      .txt{
        position: absolute;
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        color: #000;
        text-align: center;
      }
      .slider{
        position: absolute;
        left:0;
        top:0;
        width: 50px;
        height: 38px;
        border: 1px solid #ccc;
        background: #fff;
        text-align: center;
        cursor: move;
      }
      .slider>i{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
      }
      .slider.active>i{
        color:green;
      }
    </style>
  </head>
  <body>
    <div style="width:380px;height:auth;padding:30px;margin:0 auto;margin-top:19%;background:rgba(255,255,255,0.5)">
      <form class="layui-form" id="login-form">
        <div class="layui-form-item">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-inline">
            <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">密码</label>
          <div class="layui-input-inline">
            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <div id="box" onselectstart="return false;">
            <div class="bgColor"></div>
            <div class="txt" >拖动滑块验证</div>
            <div class="slider"><i class="layui-icon layui-icon-next" style="font-size: 14px; color: #999;"></i></div>
          </div> 
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal"  type="button" id="btn-submit">登录</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
    </div>
    <script src="/themes/admin/assets/layui.js"></script>
    <script>
      layui.use("layer");

      //滑块开始
      function getEle(selector){
        return document.querySelector(selector);
      }
      //二、获取到需要用到的DOM元素
      var box = getEle("#box"),//容器
          bgColor = getEle(".bgColor"),//背景色
          txt = getEle(".txt"),//文本
          slider = getEle(".slider"),//滑块
          icon = getEle(".slider>i"),
          successMoveDistance = box.offsetWidth- slider.offsetWidth,//解锁需要滑动的距离
          downX,//用于存放鼠标按下时的位置
          isSuccess = false;//是否解锁成功的标志，默认不成功

      //三、给滑块添加鼠标按下事件
      slider.onmousedown = mousedownHandler;

      //3.1鼠标按下事件的方法实现
      function mousedownHandler(e){
        bgColor.style.transition = "";
        slider.style.transition = "";
        var e = e || window.event || e.which;
        downX = e.clientX;
        //在鼠标按下时，分别给鼠标添加移动和松开事件
        document.onmousemove = mousemoveHandler;
        document.onmouseup = mouseupHandler;
      };

      //四、定义一个获取鼠标当前需要移动多少距离的方法
      function getOffsetX(offset,min,max){
        if(offset < min){
          offset = min;
        }else if(offset > max){
          offset = max;
        }
        return offset;
      }

      //3.1.1鼠标移动事件的方法实现
      function mousemoveHandler(e){
        var e = e || window.event || e.which;
        var moveX = e.clientX;
        var offsetX = getOffsetX(moveX - downX,0,successMoveDistance);
        bgColor.style.width = offsetX + "px";
        slider.style.left = offsetX + "px";

        if(offsetX == successMoveDistance){
          success();
        }
        //如果不设置滑块滑动时会出现问题（目前还不知道为什么）
        e.preventDefault();
      };

      //3.1.2鼠标松开事件的方法实现
      function mouseupHandler(e){
        if(!isSuccess){
          bgColor.style.width = 0 + "px";
          slider.style.left = 0 + "px";
          bgColor.style.transition = "width 0.8s linear";
          slider.style.transition = "left 0.8s linear";
        }
        document.onmousemove = null;
        document.onmouseup = null;
      };

      //五、定义一个滑块解锁成功的方法
      function success(){
        isSuccess = true;
        txt.innerHTML = "验证成功";
        bgColor.style.backgroundColor ="#93c47d";
        slider.className = "slider active";
        icon.className = "iconfont icon-xuanzhong";
        //滑动成功时，移除鼠标按下事件和鼠标移动事件
        slider.onmousedown = null;
        document.onmousemove = null;
      };
      //滑块结束

      $("#btn-submit").click(function () {              
        if(isSuccess){
          var data = $("#login-form").serialize();
          debugger
          $.ajax({
            type:"POST",
            data:data,
            url:"/admin/index/login",
            success:function (e) {
              if (e.code == 1){
                layer.msg(e.msg);
                setTimeout(function () {
                  location.href = "/admin";
                },2000)
              }else {
                layer.msg(e.msg);
              }
            }
          })
        }else{
          layer.msg("请滑动验证");
        }
      })
    </script>
  </body>
</html>